<script setup lang="ts">
  import Header from '@/components/pages/return-factory/index/list/Header.vue'
  import Table from '@/components/pages/return-factory/index/list/Table.vue'
  import Pagination from '@/components/Pagination/index.vue'
  import { computed, onMounted, ref, watch } from 'vue'
  import { useRoute } from 'vue-router'
  import routeComponentName from '@/config/route-component-name'
  import { SearchForm } from '@/components/pages/return-factory/index/list/types'

  defineOptions({
    name: routeComponentName.returnFactory.returnFactoryList,
  })

  // 激活路由对象
  const route = useRoute()

  // 返厂表格组件实例
  const tableInstance = ref<InstanceType<typeof Table> | null>(null)

  // 头部组件实例
  const headerInstance = ref<InstanceType<typeof Header> | null>(null)

  // 分页组件实例
  const paginationInstance = ref<InstanceType<typeof Pagination> | null>(null)

  // 获取列表请求参数
  const getListParam = ref({
    limit: 50,
    page: 1,
    repairModuleId: '',
    repairNo: '',
    status: null,
    userKeyword: '',
  })

  // 列表总条数
  const listTotal = computed(() => {
    if (tableInstance.value) {
      return tableInstance.value.total
    }
    return 0
  })

  /**
   * 搜索条件更新事件
   * @param {SearchForm} searchForm - 搜索表单
   */
  const handleChangeGetListParam = (searchForm: SearchForm) => {
    Object.assign(getListParam.value, searchForm)
    getList()
  }

  /**
   * 获取列表方法
   */
  const getList = () => {
    if (tableInstance.value && paginationInstance.value) {
      getListParam.value.limit = paginationInstance.value.size
      getListParam.value.page = paginationInstance.value.current
      tableInstance.value.getList(getListParam.value)
    }
  }

  watch(
    () => route.name,
    (value) => {
      if (value !== 'returnFactoryList') return
      if (!route.query.isUpdate) return
      if (route.query.isUpdate !== 'true') return
      getList()
    },
  )

  onMounted(() => {
    getList()

    if (headerInstance.value) {
      headerInstance.value.getModuleOptions()
    }
  })
</script>

<template>
  <div class="return-factory-list-wrapper">
    <div class="return-factory-list">
      <div class="header">
        <Header ref="headerInstance" @get-list="handleChangeGetListParam"></Header>
      </div>
      <div class="table-pagination">
        <div class="table">
          <Table ref="tableInstance"></Table>
        </div>
        <div class="pagination">
          <Pagination
            ref="paginationInstance"
            :total="listTotal"
            @size-change="getList"
            @current-change="getList"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
  .return-factory-list-wrapper {
    width: 100%;
    height: calc(100vh - 92px);
    box-sizing: border-box;
    padding: 12px;

    .return-factory-list {
      width: 100%;
      height: 100%;
      background-color: #fff;
      box-sizing: border-box;
      padding: 12px;
      display: flex;
      flex-direction: column;
      row-gap: 12px;

      .table-pagination {
        flex: 1;
        height: 0;
        display: flex;
        flex-direction: column;
        row-gap: 12px;

        .table {
          max-height: calc(100% - 40px);
        }

        .pagination {
          display: flex;
          justify-content: flex-end;
        }
      }
    }
  }
</style>
